<script setup lang="ts">
import { ElButton, ElStep, ElSteps } from 'element-plus'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import CloseDialog from './components/close-dialog.vue'
import ComOrderList from './components/com-orderList.vue'

const activeSteps = ref(0)
const titleArr = ref(['基本信息', '购房人信息', '商品信息', '费用信息', '操作信息'])
const router = useRouter()
// 关闭订单
const refDialog = ref<any>()
function closeOrder() {
    refDialog.value.show()
}
</script>

<template>
    <div class="view-order">
        <div class="view-order-main">
            <div class="main-btn">
                <p>
                    <ElButton size="small"
                              @click="router.push('/trade-center/good-room/Intentional-deposit')"
                    >
                        返回列表
                    </ElButton>
                </p>

                <p>
                    <ElButton size="small"
                              color="#F53639"
                              plain
                              @click="closeOrder"
                    >
                        关闭订单
                    </ElButton>

                    <ElButton size="small"
                              color="#F53639"
                              plain
                              @click="router.push('/trade-center/good-room/refund')"
                    >
                        取消订单
                    </ElButton>
                </p>
            </div>

            <div class="main-stap">
                <ElSteps style="width: 60%"
                         :active="activeSteps"
                         align-center
                >
                    <ElStep title="提交订单"
                            description="2024-02-25 15:43:23"
                    />

                    <ElStep title="支付订单"
                            description="未支付"
                    />

                    <ElStep title="网签备案" />
                </ElSteps>
            </div>

            <ComOrderList v-for="item in titleArr"
                          :key="item"
                          :title="item"
            />
        </div>
    </div>

    <CloseDialog ref="refDialog" />
</template>

<style lang="scss" scoped>
.view-order {
    padding: 20px;
    background: #fff;

    .main-btn {
        height: 32px;
        display: flex;
        justify-content: space-between;
    }

    .main-stap {
        height: 64px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>
